<template>
    <div class="about">
        <div class="me">
            <div class="people"><img :src="people" alt=""></div>
            <div class="js">
                <div><img :src="js" alt=""></div>
                <div class="text"><span>JavaScript</span></div>
            </div>
            <div class="vue">
                <div><img :src="vue" alt=""></div>
                <div class="text"><span>VUE</span></div>
            </div>
            <div class="jq">
                <div><img :src="jq" alt=""></div>
                <div class="text"><span>JQuery</span></div>
            </div>
            <div class="ajax">
                <div><img :src="ajax" alt=""></div>
                <div class="text"><span>AJAX</span></div>
            </div>
            <div class="node">
                <div><img :src="node" alt=""></div>
                <div class="text"><span>node.js</span></div>
            </div>
            <div class="html">
                <div><img :src="html" alt=""></div>
                <div class="text"><span>HTML</span></div>
            </div>
            <div class="css">
                <div><img :src="css" alt=""></div>
                <div class="text"><span>CSS</span></div>
            </div>
            <div class="bootstrap">
                <div><img :src="bootstrap" alt=""></div>
                <div class="text"><span>bootstrap</span></div>
            </div>
            <div class="element">
                <div><img :src="element" alt=""></div>
                <div class="text"><span>element-ui</span></div>
            </div>
            <div class="wx">
                <div><img :src="wx" alt=""></div>
                <div class="text"><span>微信小程序</span></div>
            </div>

        </div>

    </div>
</template>

<script>
    import people from '../../public/img/team-1.png'
    import vue from '../../public/img/vue.jpg'
    import js from '../../public/img/js.jpg'
    import jq from '../../public/img/jq.png'
    import ajax from '../../public/img/ajax.jpg'
    import node from '../../public/img/node.jpg'
    import html from '../../public/img/html.jpg'
    import css from '../../public/img/css.jpg'
    import bootstrap from  '../../public/img/bootstrap.jpg'
    import element from '../../public/img/element.svg'
    import wx from '../../public/img/wx.jpg'
    export default {
        name: "skill",
        data(){
            return{
                people:people,
                js:js,
                vue:vue,
                jq:jq,
                ajax:ajax,
                node:node,
                html:html,
                css:css,
                bootstrap:bootstrap,
                element:element,
                wx:wx,
            }
        }
    }
</script>

<style scoped>
  .me{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background-color: lightskyblue;
  }
    .people img{
        width: 60px;
        height: 60px;
        border-radius: 60px;
    }
    .js .text,.vue .text,.jq .text,.ajax .text,.node .text{
        text-align: center;
    }
    .js{
        position: absolute;
        left: 80px;
        top: 250px;
    }
    .vue{
        position: absolute;
        left: 200px;
        top: 275px;
    }
    .jq{
        position: absolute;
        left: 75px;
        top: 430px;
    }
    .ajax{
        position: absolute;
        left: 250px;
        top: 400px;
    }
    .node{
        position: absolute;
        left: 105px;
        top: 350px;
    }
    .html{
        position: absolute;
        left: 200px;
        top: 485px;
    }
    .css{
        position: absolute;
        left: 310px;
        top: 305px;
    }
    .bootstrap{
        position: absolute;
        left: 25px;
        top: 345px;
    }
    .element{
        position: absolute;
        left: 110px;
        top: 540px;
    }
    .wx{
        position: absolute;
        left: 265px;
        top: 215px;
    }
    .js img,.vue img,.jq img,.ajax img{
        width: 60px;
        height: 60px;
        border-radius: 60px;
        /*规定动画变换速度：ease-in-out -->动画以低速开始和结束 */
        -webkit-animation-timing-function:ease-in-out;

        /*为 @keyframes 动画规定一个名称*/
        -webkit-animation-name:icon;

        /*完成一个动画所需时间*/
        -webkit-animation-duration:2500ms;

        /*规定动画播放次数：infinite为无限次*/
        -webkit-animation-iteration-count:infinite;

        /*规定动画播放方式：alternate为轮流反向播放*/
        -webkit-animation-direction:alternate;
    }
  @-webkit-keyframes icon {
      0% {
          opacity:.6;     /*元素不透明级别*/
          transform: scale(0.6);
      }
      100% {
          opacity:1;
          transform:scale(1);
      }
  }
    .node img,.html img,.css img,.bootstrap img,.element img,.wx img{
        width: 40px;
        height: 40px;
        border-radius: 40px;
        /*规定动画变换速度：ease-in-out -->动画以低速开始和结束 */
        -webkit-animation-timing-function:ease-in-out;

        /*为 @keyframes 动画规定一个名称*/
        -webkit-animation-name:icon-s;

        /*完成一个动画所需时间*/
        -webkit-animation-duration:2500ms;

        /*规定动画播放次数：infinite为无限次*/
        -webkit-animation-iteration-count:infinite;

        /*规定动画播放方式：alternate为轮流反向播放*/
        -webkit-animation-direction:alternate;
    }
  @-webkit-keyframes icon-s {
      0% {
          opacity:.4;     /*元素不透明级别*/
          transform: scale(0.6);
      }
      100% {
          opacity:1;
          transform: scale(1);
      }
  }

</style>